<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>苏宁易购</title>
</head>

<body>
      <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
      <script src='../../node_modules/swiper/swiper-bundle.js'></script>
      <script src="../jd_left_nav.js"></script>
      <script src="../../node_modules/lazyload.js"></script>

      <!-- 广告区域 -->
      <div class="index_adv_tl">
            <a class="index_adv" href="https://cuxiao.suning.com/scms/618xhzw.html">
                  <img src="./img/dingbupic.png" alt="" title="618">
            </a>
            <div class="close_indexadv">
                  ×
            </div>
      </div>
      <!-- 广告区域结束 -->

      <!-- 导航区域 -->

      <div class="nav_tl">
            <ul class="nav">
                  <ol class="nav_lef">
                        <li class="nav_lef_li">
                              <!-- 网站导航 -->
                              <div class="nav_lef_li_webnav">网站导航
                                    <div class="dis_none">
                                          <ul class="web_nav">
                                                <li>
                                                      <div class="sp_shopping">特色购物</div>
                                                      <div class="sp_shopping_detil">
                                                            <a href="https://www.baidu.com">苏宁互联</a>
                                                            <a href="https://www.baidu.com">苏宁达人</a>
                                                            <a href="https://www.baidu.com">苏宁卡</a>
                                                            <a href="https://www.baidu.com">苏宁国际</a>
                                                            <a href="https://www.baidu.com">易回收</a>
                                                            <a href="https://www.baidu.com">二手优品</a>
                                                            <a href="https://www.baidu.com">领券中心</a>
                                                            <a href="https://www.baidu.com">苏宁</a>
                                                            <a href="https://www.baidu.com">导购指南</a>
                                                            <a href="https://www.baidu.com">江苏馆</a>
                                                      </div>
                                                </li>
                                                <li>
                                                      <div class="sp_shopping">主题频道</div>
                                                      <div class="sp_shopping_detil">
                                                            <a href="https://www.baidu.com">电器城</a>
                                                            <a href="https://www.baidu.com">苏宁超市</a>
                                                            <a href="https://www.baidu.com">手机</a>
                                                            <a href="https://www.baidu.com">电脑</a>
                                                            <a href="https://www.baidu.com">家装馆</a>
                                                      </div>
                                                </li>
                                                <li>
                                                      <div class="sp_shopping">生活助手</div>
                                                      <div class="sp_shopping_detil">
                                                            <a href="https://www.baidu.com">零钱宝</a>
                                                            <a href="https://www.baidu.com">手机充值</a>
                                                            <a href="https://www.baidu.com">转账还款</a>
                                                            <a href="https://www.baidu.com">约服务</a>
                                                            <a href="https://www.baidu.com">水电煤</a>
                                                            <a href="https://www.baidu.com">保险</a>
                                                            <a href="https://www.baidu.com">酒店</a>
                                                      </div>
                                                </li>
                                                <li>
                                                      <div class="sp_shopping">会员服务</div>
                                                      <div class="sp_shopping_detil">
                                                            <a href="https://www.baidu.com">会员联盟</a>
                                                            <a href="https://www.baidu.com">延长保修</a>
                                                            <a href="https://www.baidu.com">易付宝</a>
                                                            <a href="https://www.baidu.com">苏宁理财</a>
                                                            <a href="https://www.baidu.com">苏宁金融</a>
                                                      </div>
                                                </li>
                                                <li class="del_border">
                                                      <div class="sp_shopping">更多热点</div>
                                                      <div class="sp_shopping_detil">
                                                            <a href="https://www.baidu.com">PP 视频</a>
                                                            <a href="https://www.baidu.com">合作招商</a>
                                                            <a href="https://www.baidu.com">苏宁联盟</a>
                                                            <a href="https://www.baidu.com">用户体验</a>
                                                            <a href="https://www.baidu.com">苏宁公益</a>
                                                            <a href="https://www.baidu.com">苏宁有货</a>
                                                      </div>
                                                </li>
                                          </ul>
                                    </div>
                              </div>
                        </li>
                        <!-- 商家入驻 -->
                        <li class="nav_lef_li">
                              <div class="nav_lef_li_webstore">商家入驻
                                    <div class="dis_none_store">
                                          <ul class="web_nav_store">
                                                <li>
                                                      <div class="webstore_detil">
                                                            <a href="https://www.baidu.com">合作招商</a>
                                                            <a href="https://www.baidu.com">服务市场</a>
                                                            <a href="https://www.baidu.com">金融中心</a>
                                                            <a href="https://www.baidu.com">培训中心</a>
                                                            <a href="https://www.baidu.com">易通天下</a>
                                                            <a href="https://www.baidu.com">规则中心</a>
                                                            <a href="https://www.baidu.com">规则众议院</a>
                                                      </div>
                                                </li>
                                          </ul>
                                    </div>
                              </div>
                        </li>
                        <!-- 客户服务 -->
                        <li class="nav_lef_li">
                              <div class="nav_lef_li_customer">客户服务
                                    <div class="dis_none_customer">
                                          <ul class="web_nav_customer">
                                                <li>
                                                      <div class="customer_detil">
                                                            <a href="https://www.baidu.com">苏宁帮客</a>
                                                            <a href="https://www.baidu.com">帮助中心</a>
                                                            <a href="https://www.baidu.com">退换/维修</a>
                                                            <a href="https://www.baidu.com">意见反馈</a>
                                                            <a href="https://www.baidu.com">30 天包换</a>
                                                            <a href="https://www.baidu.com">省心购</a>
                                                            <a href="https://www.baidu.com">电话客服</a>
                                                            <a href="https://www.baidu.com">在线咨询</a>
                                                      </div>
                                                </li>
                                          </ul>
                                    </div>
                              </div>
                        </li>
                        <li class="nav_lef_li">网页无障碍</li>
                        <li class="nav_lef_li">选择地区</li>
                  </ol>
                  <ol class="nav_rig">
                        <li class="nav_rig_login active">
                              <a href="login.html">请登录</a>
                        </li>
                        <li class="nav_rig_login1">
                              <a >xxx
                              </a>
                             
                        </li>
                        <li class="nav_rig_register">
                              <a href="register.html" style="color:orange;">注册有礼</a>
                        </li>
                        <!-- 我的订单 -->
                        <li class="my_list">
                              <div class="nav_my_list">我的订单
                                    <ul class="dis_none_mylist">
                                          <a href="https://www.baidu.com">待支付</a>
                                          <a href="https://www.baidu.com">待收货</a>
                                          <a href="https://www.baidu.com">待评价</a>
                                          <a href="https://www.baidu.com">我的订单</a>
                                    </ul>
                              </div>
                        </li>
                        <!-- 我的易购 -->
                        <li class="my_rig_yigou">
                              <div class="nav_my_yigou">我的易购
                                    <ul class="dis_none_myyigou">
                                          <div class="dis_none_myyigou_top">
                                                <div class="myyigou_logo">
                                                      <img src="./img/tool-logo.png" alt="">
                                                </div>
                                                <div class="myyigou_login active">
                                                      <a href="login.html">请登录</a>
                                                </div>
                                                <div class="myyigou_dis">
                                                      xxx
                                                </div>
                                          </div>
                                          <ol class="dis_none_myyigou_bot">
                                                <li><a href="https://www.baidu.com">我的消息</a></li>
                                                <li><a href="https://www.baidu.com">我的关注</a></li>
                                                <li><a href="https://www.baidu.com">我的金融</a></li>
                                                <li><a href="https://www.baidu.com">苏宁会员</a></li>
                                                <li><a href="https://www.baidu.com">我的任性付</a></li>
                                                <li><a href="https://www.baidu.com">我的优惠券</a></li>
                                          </ol>
                                    </ul>
                              </div>
                        </li>
                        <li>苏宁会员</li>
                        <li class="nav_rig_cart">
                              <a href="cart.html">购物车</a>
                        </li>
                        <li>易付宝</li>
                        <li>企业采购</li>
                        <li>手机苏宁</li>
                  </ol>
            </ul>
            <div class="advAppear">
                  <div>+</div>
            </div>
      </div>

      <!-- 导航区域结束 -->

      <!-- 搜索区域 -->      
     
      <div class="search_box">
            <div class="search_logo">
                  <img src="./img/suning_logo.png" alt="">
            </div>


            <div class="search_area">
                  <form class="search_inp">
                        <input type="text" class="search_input_value" value="" placeholder="热水器精选">
                        <img src="./img/fangdajing.png" alt="" class="fangdajing">
                        <button class="btn">搜&nbsp;索</button>
                  </form>
                  <!-- 搜索历史 -->
                  <div>
                        <ul class="inp_history">
                              <div class="inp_history_none">
                                    <div class="inp_history_none_lef">
                                          <span>最近搜索</span>

                                          <div class="search_img">
                                                <img src="./img/search-express-none.png" alt="">
                                          </div>


                                    </div>
                                    <div class="inp_history_none_rig">
                                          <p>最近热搜...</p>
                                          <ul>
                                                <li class="search_high">
                                                      <a href="https://www.baidu.com">华为 Mate40</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">热水器</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">手机</a>
                                                </li>
                                                <li class="search_high">
                                                      <a href="https://www.baidu.com">冰箱</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">电风扇</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">笔记本</a>
                                                </li>
                                                <li class="search_high">
                                                      <a href="https://www.baidu.com">iphone13</a>
                                                </li>
                                                <li class="search_high">
                                                      <a href="https://www.baidu.com">洗衣机</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">儿童手表</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">电视</a>
                                                </li>
                                                <li class="search_high">
                                                      <a href="https://www.baidu.com">玩具</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">苹果 11</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">男装</a>
                                                </li>
                                                <li>
                                                      <a href="https://www.baidu.com">消毒液</a>
                                                </li>
                                                <li class="search_high">
                                                      <a href="https://www.baidu.com">女装</a>
                                                </li>
                                          </ul>
                                    </div>

                              </div>

                        </ul>
                  </div>

                  <ul>
                        <a herf="">手机</a>
                        <a style="color:orange" class="search_fs">爆款洗衣机</a>
                        <a herf="">冰箱</a>
                        <a style="color:orange" class="search_fs">奶粉特惠购</a>
                        <a style="color:orange" class="search_fs">品质家居购</a>
                        <a herf="">电视</a>
                        <a herf="">ipad</a>
                        <a herf="">热水器</a>
                        <a herf="" class="del_border">沙发</a>
                  </ul>
            </div>

      </div> 
      <!-- 搜索区域结束 -->

      <!-- 导航 bar 区域 -->

      <div class="nav_bar">
            <a class="nav_bar_classify">
                  <div class=" iconfont icon-gengduo-2">
                        分类
                  </div>
            </a>
            <div class="nav_bar_center">
                  <li>
                        <a href="https://www.baidu.com">
                              <img src="./img/dahuijv.png" alt="">
                        </a>
                  </li>
                  <li>
                        <a href="https://www.baidu.com">
                              电器城
                        </a>
                  </li>
                  <li>
                        <a href="https://www.baidu.com">
                              手机数码
                        </a>
                  </li>
                  <li>
                        <a href="https://www.baidu.com">
                              苏宁超市
                        </a>
                  </li>
                  <li>
                        <a href="https://www.baidu.com">
                              家具建材
                        </a>
                  </li>
                  <li>
                        <a href="https://www.baidu.com">
                              生活家电
                        </a>
                  </li>
                  <li>
                        <a href="https://www.baidu.com">
                              帮客服务
                        </a>
                  </li>
                  <li>
                        <a href="https://www.baidu.com">
                              金融
                        </a>
                  </li>
            </div>
            <a class="nav_bar_publicity">
                  公示: 协议|规则|证照
            </a>
      </div>  

      <!-- 导航 bar 区域结束 -->

      <!-- 轮播图区域--通栏 -->
      <div class="banner_box">
            <!-- 版心区域 -->
            <div class="banner_box_center">
                  <!-- 轮播图 -->
                  <div class="swiper banner">
                        <div class="swiper-wrapper">
                              <div class="swiper-slide">
                                    <img src="./img/b1.jpeg" alt="">
                              </div>
                              <div class="swiper-slide">
                                    <img src="./img/b2.jpeg" alt="">
                              </div>
                              <div class="swiper-slide">
                                    <img src="./img/b3.jpeg" alt="">
                              </div>
                              <div class="swiper-slide">
                                    <img src="./img/b4.jpeg" alt="">
                              </div>
                              <div class="swiper-slide">
                                    <img src="./img/b5.jpeg" alt="">
                              </div>
                              <div class="swiper-slide">
                                    <img src="./img/b6.jpeg" alt="">
                              </div>
                              <div class="swiper-slide">
                                    <img src="./img/b9.jpeg" alt="">
                              </div>
                              <div class="swiper-slide">
                                    <img src="./img/b8.jpeg" alt="">
                              </div>


                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination">
                        </div>
                        <!-- 左右切换 -->
                        <div class="banner_prev">
                              &lt;
                        </div>
                        <div class="banner_next">
                              &gt;
                        </div>
                  </div>
                  <!-- 轮播图结束 -->

                  <!-- 侧边栏 -->
                  <div class="nav_aside">

                        <ul class="nav_aside_lef">
                              <div class="nav_aside_lef_img">
                                    <p>
                                          <img src="./img/as1.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as2.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as3.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as4.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as5.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as6.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as7.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as8.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as9.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as10.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as11.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as12.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as13.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as14.png" alt="">
                                    </p>
                                    <p>
                                          <img src="./img/as15.png" alt="">
                                    </p>
                              </div>
                              <div class="nav_aside_lef_info">
                                    <!--  JS 渲染实现 -->
                              </div>
                        </ul>
                        <div class="nav_aside_rig">
                              <div class="nav_aside_rig_box">
                                    <div class="left">
                                          <!-- <ul class="tags">
                                                <li>
                                                      <span>家电馆</span>
                                                </li>
                                          </ul>
                                          <ul class="cate_list">
                                                <li>
                                                      <div class="name">
                                                            <span>分类名称</span>
                                                      </div>
                                                      <ol>
                                                            <li>内容</li>

                                                      </ol>
                                                </li> 
                                          </ul> -->
                                          <!-- JS 渲染实现 -->
                                    </div>
                                    <div class="right">
                                          <ul class="small_list">
                                                <!-- JS 渲染 -->
                                          </ul>
                                          <ul class="big_list">
                                                <!-- JS 渲染 -->
                                          </ul>
                                    </div>
                              </div>


                        </div>


                        <!-- 最右侧 -->
                        <div class="banner_box_rig">
                              <div class="top">
                                    <div class="login">
                                          <div class="lef">
                                                <img src="./img/tool-logo.png" alt="">
                                          </div>
                                          <div class=" rig active">
                                                <div class="top">
                                                      Hi,欢迎来到苏宁易购
                                                </div>
                                                <div class="bot">
                                                      <a href="register.html">注册</a>|
                                                      <a href="login.html">登录</a>
                                                </div>
                                          </div>
                                          <div class="rig1 ">
                                                <div class="top">
                                                      Hi,欢迎您
                                                      <p style = "color:red" class="xuanran">xxx</p>
                                                </div>
                                                <div class="bot">
                                                     尽情购物吧!
                                                </div>
                                          </div>
                                    </div>
                                    <div class="fuli">
                                          <div class="cen">
                                                <p>
                                                      <a href="https:///www.baidu.com">199新人专享</a>
                                                </p>

                                          </div>

                                          <div class="bott">
                                                <p>
                                                      <a href="https:///www.baidu.com">开通Super尊享特权</a>
                                                </p>

                                          </div>


                                    </div>

                                    <div class="fuli_bot">
                                          <div class="iconfont icon-31">
                                                <p>领红包</p>
                                          </div>
                                          <div class="iconfont icon-shoucang1">
                                                <p>领云钻</p>
                                          </div>
                                          <div class="iconfont icon-youhuiquan-01">
                                                <p>优惠券</p>
                                          </div>

                                    </div>

                              </div>

                              <div class="bottom">
                                    <div class="iconfont icon-shouji1 a">
                                          <p>
                                                <a href="https://www.baidu.com"> 手机充值</a>
                                          </p>
                                    </div>
                                    <div class="iconfont icon-50 b">
                                          <p>安全</p>
                                    </div>
                                    <div class="iconfont icon-user c">
                                          <p>我的</p>
                                    </div>
                                    <div class="iconfont icon-xiaoxi d">
                                          <p>消息</p>
                                    </div>
                                    <div class="iconfont icon-bianji e">
                                          <p>编辑</p>
                                    </div>
                                    <div class="iconfont icon-icongerenzhongxin-01 f">
                                          <p>个人中心</p>
                                    </div>
                                    <div class="iconfont icon-wodedingdan g">
                                          <p>我的订单</p>
                                    </div>
                                    <div class="iconfont icon-daishouhuo-01 h">
                                          <p>收货</p>
                                    </div>
                                    <div class="iconfont icon-youhuiquan-01 i">
                                          <p>优惠券</p>
                                    </div>

                              </div>
                        </div>
                  </div>
            <!-- 侧边栏结束 -->
            </div>
      <!-- 版心区域结束 -->
      </div>
      <!-- 轮播图区域结束 -->

      <!-- 商品背景颜色 -->
      <div class="bg_color">

      <!-- 秒杀区域 title-->
      <div class="buybuybuy">
            <div>
                  <img src="./img/miaosha.png" alt="">
            </div>
      </div>
      <ul class="miaosha_goods floor_index">
           <!-- JS 渲染 -->
      </ul>
      <!-- 秒杀区域结束 -->


      <!-- 频道广场 -->
      <div class="square_img ">
                  <img src="./img/pindaoguangchang.png" alt="">
      </div>
      <ul class="square_goods floor_index">
            <!-- JS 渲染 -->
       </ul>
       <!-- 频道广场结束 -->


       <!-- 为你推荐 -->
       <div class="recommended_img floor_index">
            <img src="./img/weinituijian.png" alt="">
       </div>
       <div class="recommended ">
                  <ul class="btn">
                        <li class="active">
                              <p class="title">食品酒水</p>
                              <p class="shuoming">选项卡</p>  
                        </li>
                        <li>
                              <p class="title">童装玩具</p>
                              <p class="shuoming">选项卡</p>  
                        </li>
                        <li>
                              <p class="title">大家电</p>
                              <p class="shuoming">选项卡</p>  
                        </li>
                        <li>
                              <p class="title">海外购</p>
                              <p class="shuoming">选项卡</p>  
                        </li>
                        <li>
                              <p class="title">家居建材</p>
                              <p class="shuoming">选项卡</p>  
                        </li>
                        <li>
                              <p class="title">珠宝首饰</p>
                              <p class="shuoming">选项卡</p>  
                        </li>
                        <li>
                              <p class="title">女装</p>
                              <p class="shuoming">选项卡</p>  
                        </li>
                  </ul>
                     
                  <ol class="tab">
                        <li class="active">
                              <ul class="tabs1">
                                   <!-- JS 渲染实现 -->
                              </ul>
                        </li>
                        <li >
                              <ul class="tabs2">
                                   <!-- JS 渲染实现 -->
                              </ul>

                        </li>
                        <li >
                              <ul class="tabs3">
                                     <!-- JS 渲染实现 -->
                              </ul>

                        </li>
                        <li >
                              <ul class="tabs4">
                                   <!-- JS 渲染实现 -->
                              </ul>

                        </li>
                        <li >
                              <ul class="tabs5">
                                    <!-- JS 渲染实现 -->
                              </ul>

                        </li>
                        <li >
                              <ul class="tabs6">
                                    <!-- JS 渲染实现 -->
                              </ul>

                        </li>
                        <li>
                              <ul class="tabs7">
                                     <!-- JS 渲染实现 -->
                              </ul>
                        </li>
                  </ol>
                  <div class="loading">
                        <img src="./img/loading.gif" alt="">
             </div>
       </div>
       <!-- 为你推荐结束 -->

       <!-- 楼梯层导航 -->
      <div class="floor_nav">
       <ul> 
            <li class="floor_first">限时秒杀
                  <img src="./img/float-bg.png" alt=""></li>
            <li>频道广场</li>
            <li>为你推荐</li>
       </ul>
       <div class="goToTop">
          返回顶部
       </div>
      </ul>
      </div>
      <!-- 楼梯层导航结束 -->

      <!-- 尾部 -->
     <footer class="indexPage">
      网页的尾部
     </footer>
</body>
</html>